<template>
    <el-dialog
       class="dialog-warp"
      :title="dialogTitle"
      :visible.sync="visible"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :width="popupWidth"
      @close="handleClose"
    >
      <slot>
        <p>弹窗内容自定义</p>
      </slot>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" v-preventReClick @click="Save" size="small">确定</el-button>
        <el-button @click="Cancel" size="small">取 消</el-button>
      </span>
    </el-dialog>
</template>
<script>
export default {
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    dialogTitle:{
      type:String,
      default:'我是title'
    },
    popupWidth:{
      type:String,
      default:'20%'
    }
  },
  data(){
    return {

    }
  },
  methods:{
    Cancel(){
      this.$emit('close')
    },
    Save(){
      this.$emit('Save')
    },
    handleClose(){
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss">
.dialog-warp {
   .el-dialog__header {
     padding:8px 5px 8px 10px;
     background-color: rgb(248, 248, 249);
     border-bottom: 1px solid #EBEEF5;
     text-indent: 1em;
  }
  .el-dialog__headerbtn {
    top:14px;
    right:10px;
  }
}

</style>